<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	    <!--<link rel="stylesheet" href="../../css/aui.css">-->
		<link rel="stylesheet" href="../../css/libs/ydui.css">
	    <link rel="stylesheet" href="../../css/hm-cashier.css">
		<style>
			.layui-m-layerchild{line-height:1;width: 90%;border-radius:10px !important}
			.payBox-title{font-size:0.9rem;color:#333;padding:0.925rem 0 1.05rem;text-align:center;position:relative;}
			.payBox-title img{position: absolute;top:1rem;right:0.75rem;width: 1rem;}
			.payBox-txt{text-align:center;}
			.payBox-txt > :first-child{font-size:0.7rem;color:#666;}
			.payBox-txt > :last-child{font-size:0.9rem;color:#333;margin:.25rem 0 1rem}
			.payBox-other{text-align:center;padding:1rem 0;color:#2a8fff}
			.payBox-other img{display:inline-block;font-size:0.7rem;width:.3rem;position:relative;top:1px;}
			.payBox2-title{text-align:left;color:#2A8FFF;border-bottom:1px solid #ccc;margin-left:0.75rem;margin-right:0.75rem}
			.payBox2-title img{right:0}
			.payBox2-list{margin-left:0.75rem;margin-right:0.75rem}
			.payBox2-item{padding:0.8rem 0;display:flex}
			.payBox2-item .payBox-icon1{width:1.2rem;height:1.2rem;align-self: center;}
			.payBox2-item .payBox-icon2{width:0.775rem;height:0.775rem;align-self: center;}
			.payBox-item-txt{flex:1;box-sizing: border-box;padding-left: .5rem;}
		</style>
		<style>
			.payBox-number{display: flex;margin: 0 0.6125rem;position:relative}
			.payBox-number div{width:2.3rem;height:2.3rem;line-height:2.3rem;border:1px solid #ccc;border-left:0;text-align: center; }
			.payBox-number input{position: absolute;left: 0;top: 0;width: 100%;height:100%;opacity: 0}
			.payBox-number :first-child{border-left: 1px solid #ccc;}
			.goIcon{
				display: flex;
			}
			.goIcon span{
				display: inline-block;
				width: 20px;
				height: 20px;
				background: url('../../img/gwc/gwc-radio.png') no-repeat;
				background-size: contain;
			}
			.goIcon span.active{
				background: url('../../img/gwc/gwc-radio2.png') no-repeat;
				background-size: contain;
			}
			.goIcon i.active{
				background: url('../../img/radioIcon.png') no-repeat;
				background-size: contain;
			}
			.goIcon i{
				display: block;
				background: url('../../img/radioIcon2@2x.png') no-repeat;
				background-size: contain;
			}
		</style>
		<script src="../../js/api.js"></script>
		<script src="../../js/libs/zepto.min.js"></script>
		<script src="../../js/layer.js"></script>
		<!--<script src="../../js/ydui.flexible.js"></script>-->
		<script src="../../js/jquery.min.js"></script>
		<script src="../../js/ydui.js"></script>
		<script>
            $(function () {
				$('.pay').tap(function () {
                    layer.open({
                        type: 1,
						content: "",
                        shadeClose: true,
                        success: function (index, layero) {
                            $('.layui-m-layercont').html($('#payBox').html());
                            $('.payBox-title img').tap(function () {
                                layer.closeAll();
                            });

                            var $obj = $('.payBoxNumber');
                            var reg=/^\d{6}$/;
                            $obj.focus();
                            $obj.keyup(function () {
                                var $this = $(this);
                                var $arr = $this.siblings('div');
                                var str = $this.val();
                                if(reg.test(str)){
                                    alert(1)
								}
								console.log(str.replace(/^\d{6}&/g,str));
                                var a = '';
                                console.log(str);
                                vm.payStr=str;
                                if (str != '') {
                                    $.each(str,function (i,val) {
                                        a = i + 1;
                                        $arr.eq(i).text(val);
                                        if (i >= 5) {
                                            $this.blur();

                                        }
                                    });
                                    if (a <= 6) {
                                        console.log($arr.eq(a));
                                        $arr.eq(a).text('');
                                    }
                                }

                            });

                            $('.payBox-other').tap(function () {
                                layer.closeAll();
                                layer.open({
                                    type: 1,
                                    content: "",
                                    shadeClose: true,
                                    success: function (index, layero) {
                                        $('.layui-m-layercont').html($('#payBox2').html());
                                        $('.payBox-title img').tap(function () {
                                            layer.closeAll();
                                        });
                                    }
                                })
                            })
                        }
                    });
                });
            });
		</script>
		<title>华猫收银台</title>
	</head>
	<body>
		<div id="app">
		<div id="box">
			
			<div class="WD-shenti">
				
				
				<div class="WD-nav">
					
					
					<div class="WD-info flex">
						<div class="color-666">
							<p>需付款</p>
						</div>
						
						<div class="money">
							<p>{{returnFloat(totalMoney)}}<span class="span1"></span><span class="span2">元</span></p>
						</div>
					</div>
					
					<div class="order flex nobor">
						<div class="color-666">
							<p>订单号码</p>
						</div>
						
						<div class="money1">
							<p>{{orderId}}</p>
						</div>
					</div>
					
					<div class="order flex nobor">
						<div class="color-666">
							<p>商品合计</p>
						</div>
						
						<div class="money1">
							<p>{{returnFloat(totalMoney)}}元</p>
						</div>
					</div>
					
				</div>
				
				
				
				<div class="WD-nav">
					<!--<div class="WD-info flex ">-->
						<!--<img src="../../img/huamallpay.png" />-->
					<!--</div>-->
					
					<div class="WD-info-95 flex" v-for="(o,i) in account">
						<div class="lmLogo flex">
							<img :src="o.icon" :alt=" o.title" />
							<p>{{o.title}}</p>
						</div>
						
						<div class="goIcon" @click="getPayMethod(o,i)">
							<span  :class="{'active':current==i}"></span>
							<!--<img src="../../img/gwc/gwc-radio2.png" v-if="o.isCheck==1"/>-->
							<!--<img src="../../img/gwc/gwc-radio.png" v-if="o.isCheck==0"/>-->
						</div>
					</div>

					<!--<div class="WD-info-95 flex ">-->
						<!--<div class="lmLogo flex">-->
							<!--<img src="../../img/huabao.png" />-->
							<!--<p>华宝支付</p>-->
						<!--</div>-->
						<!---->
						<!--<div class="goIcon">-->

						<!--</div>-->
					<!--</div>-->
					<!---->
					<!--<div class="WD-info-95 flex nobor">-->
						<!--<div class="lmLogo flex">-->
							<!--<img src="../../img/huokuan.png" />-->
							<!--<p>华宝货款</p>-->
						<!--</div>-->
						<!---->
						<!--<div class="goIcon">-->
							<!--<img src="../../img/gwc/gwc-radio.png" />-->
						<!--</div>-->
					<!--</div>-->
					
				</div>
				
				
		<!--		
				<div class="WD-nav">
					
					
					<div class="WD-info flex ">
						<p>其他支付方式</p>
					</div>
					
					<div class="WD-info-95 flex">
						<div class="lmLogo flex">
							<img src="../../img/weixin.png" />
							<p>微信支付</p>
						</div>
						
						<div class="goIcon">
							<img src="../../img/gwc/gwc-radio.png" />
						</div>
					</div>
					
					<div class="WD-info-95 flex">
						<div class="lmLogo flex">
							<img src="../../img/zhifubao.png" />
							<p>支付宝支付</p>
						</div>
						
						<div class="goIcon">
							<img src="../../img/gwc/gwc-radio.png" />
						</div>
					</div>
					
					
					<div class="WD-info-95 flex nobor">
						<div class="lmLogo flex">
							<img src="../../img/yinlian.png" />
							<p>快捷支付</p>
						</div>
						
						<div class="goIcon">
							<img src="../../img/gwc/gwc-radio.png" />
						</div>
					</div>
					
				</div>-->
				
				
			</div>
			
			
			
			<div class="pay m-button">
				<p iid="J_OpenKeyBoard">支付<span>{{returnFloat(totalMoney)}}</span>元</p>
			</div>


			<!-- 安全键盘-->

			<!--<div class="m-button">-->
				<!--<a href="javascript:;" class="btn-block btn-primary" id="J_OpenKeyBoard">打开</a>-->
			<!--</div>-->

			<!--<div class="m-keyboard" id="J_KeyBoard">-->
				<!--&lt;!&ndash; 自定义内容区域 &ndash;&gt;-->
				<!--<div style="text-align: right;padding: .15rem .8rem 0;"><a href="http://www.ydui.org" style="color: #666;font-size: .24rem;">忘记密码</a></div>-->
				<!--&lt;!&ndash; 自定义内容区域 &ndash;&gt;-->
			<!--</div>-->

			<script>
				// $(function () {
                //
                //
                //
                // var $keyboard = $('#J_KeyBoard');
                //
                // /* 初始化参数 */
                // $keyboard.keyBoard({
                 //    disorder: false, /* 是否打乱数字顺序 */
                 //    title: 'YDUI安全键盘' /* 显示标题 */
                // });
                //
                // /* 打开键盘 */
                // $('#J_OpenKeyBoard').on('click', function () {
                 //    $keyboard.keyBoard('open');
                // });
                //
                // /* 六位密码输入完毕后执行 */
                // $keyboard.on('done.ydui.keyboard', function (ret) {
                //
                 //    console.log('输入的密码是：' + ret.password);
                //
                 //    YDUI.dialog.loading.open('验证支付密码');
                 //    setTimeout(function(){
                 //        /* 显示错误信息 */
                 //        YDUI.dialog.loading.close();
                 //        $keyboard.keyBoard('error', '对不起，您的支付密码不正确，请重新输入。');
                 //    }, 1500);
                //
                 //    /* 关闭键盘 */
                 //    /* $keyboard.keyBoard('close'); */
                // });
				// });
			</script>
			
		</div>	
		<div id="payBox" style="display:none;">
			<div class="payBox-title">
				请输入支付密码
				<img src="../../img/closeIcon.png" alt=""/>
			</div>
			<ul class="payBox-txt">
				<li>金额</li>
				<li>&yen;{{returnFloat(totalMoney)}}</li>
			</ul>
			<div class="payBox-number">
				<!--<input type="password">-->
				<!--<input type="password">-->
				<!--<input type="password">-->
				<!--<input type="password">-->
				<!--<input type="password">-->
				<!--<input type="password">-->

				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<input class="payBoxNumber" type="number" maxlength="6">
			</div>
			<div class="payBox-other">
				支付方式：{{payMethod}}
				<img src="../../img/blueYou.png" alt=""/>
			</div>
			<!-- !TODO 输入完成支付-->
			<!--<div style="text-align: center"><a href=""> 支付</a></div>-->
		</div>
		<div id="payBox2" style="display:none;">
			<div class="payBox-title payBox2-title">
				更换支付方式
				<img src="../../img/closeIcon.png" alt=""/>
			</div>
			<div class="payBox2-list">
				<div style="border-bottom:1px solid #ccc">
					<div class="payBox2-item" v-for="(o,j) in account" @click="alert(j)">
						<img class="payBox-icon1" :src="o.icon" alt=""/>
						<span class="payBox-item-txt">{{o.title}}</span>
						<div class="goIcon" style="padding:0" ><i style="width: 0.775rem;height: .775rem"  :class="{'active':currentI==j}" v-on:mouseover="show"></i> </div>
						<!--<img class="payBox-icon2" src="../../img/radioIcon.png" alt=""/>-->
					</div>
					<!--<div class="payBox2-item">-->
						<!--<img class="payBox-icon1" src="../../img/hbzfIcon.png" alt=""/>-->
						<!--<span class="payBox-item-txt">华宝支付</span>-->
						<!--<img class="payBox-icon2" src="../../img/radioIcon2@2x.png" alt=""/>-->
					<!--</div>-->
					<!--<div class="payBox2-item">-->
						<!--<img class="payBox-icon1" src="../../img/hbhkIcon.png" alt=""/>-->
						<!--<span class="payBox-item-txt">华宝货款</span>-->
						<!--<img class="payBox-icon2" src="../../img/radioIcon2@2x.png" alt=""/>-->
					<!--</div>-->
				</div>
				<div>
					<div class="payBox2-item">
						<img class="payBox-icon1" src="../../img/weixin.png" alt=""/>
						<span class="payBox-item-txt">微信支付</span>
						<img class="payBox-icon2" src="../../img/radioIcon2@2x.png" alt=""/>
					</div>
					<div class="payBox2-item">
						<img class="payBox-icon1" src="../../img/zhifubao.png" alt=""/>
						<span class="payBox-item-txt">支付宝支付</span>
						<img class="payBox-icon2" src="../../img/radioIcon2@2x.png" alt=""/>
					</div>
					<div class="payBox2-item">
						<img class="payBox-icon1" src="../../img/kjzfIcon.png" alt=""/>
						<span class="payBox-item-txt">快捷支付</span>
						<img class="payBox-icon2" src="../../img/radioIcon2@2x.png" alt=""/>
					</div>
				</div>
			</div>
		</div>
</div>

		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vue-resource.min.js"></script>
		<script src="../../js/common.js"></script>
		<script>

            // $('.goIcon i').on('click',function () {
				// alert(11)
            // })
			var vm=new Vue({
				el:'#app',
				data:{
					orderId:getUrlParam('list'),
					totalMoney:getUrlParam('totalMoney'),
					current:0,//默认当前下表为0
                    payMethod:'华猫支付',//默认华猫支付
					payStr:'',//支付密码
					currentI:1,
					account:[
								{
                                    icon:'../../img/huamao.png',
                                    title:'华猫支付',
                                    isCheck:0
								},{
									icon:'../../img/xianjin.png',
									title:'现金支付',
									isCheck:0
								},{
									icon:'../../img/huabao.png',
									title:'华宝支付',
                            		isCheck:0
								},{
					    			icon:'../../img/huokuan.png',
									title:'华宝货款',
                            		isCheck:0
								}
					    ]
				},
				mounted:function(){
				    this.$nextTick(function () {
						this.pay()
                    })
				},
				methods:{
						//点击获取支付方式
					getPayMethod:function (o,i) {
                        this.current=i;
                        this.payMethod=o.title
                    },
					pay:function () {
						console.log(this.payStr)
                    },
                    show:function () {
						alert(11)
                    }
				},
			})


		</script>
	</body>
</html>
